
// 新建store 仓库

// 01: 第一步: 引入两个方法从rtk包中
import { createSlice, configureStore } from '@reduxjs/toolkit';

//02:第二步: 创建购物车切片
//createSlice 用来创建切片的,每一个切片维护了自己的state 和修改state 的方法
const shopcarSlice = createSlice({
    name: 'shopcar', // 相当于vuex 中命名空间, 给切片命名,
    initialState: { // 定义当前切片的初始数据的
        count: 0,
        shoplist: [
            {
                id: 0,
                name: '小黑瓶'
            },
            {
                id: 1,
                name: '迪奥口红'
            },
            {
                id: 2,
                name: '大宝'
            }
        ]
    },
    reducers: {
        addcount(state, actions) {
            console.log('actions', actions);
            state.count += 1
        },
        jiancount(state, actions) {
            state.count -= actions.payload
        }
    }
})

// 第三步: 按需导出 修改state 的方法, 这样当页面组件中需要操作修改count 这个变量的时候,
// 就在是当前页面组件中导入这两个方法即可
export const { addcount, jiancount } = shopcarSlice.actions;
// console.log('shopcarSlice.actions', shopcarSlice.actions);



// 第四步: 创建store 仓库
const store = configureStore({
    reducer: shopcarSlice.reducer
})

// 第五步: 导出仓库
export default store

// 要想实现仓库的全局化, 需要配合 react-redux提供的Provider组件,
// 用provider组件包裹根组件
// <Provider  store ={store}>
// < App />
// <Provider> 


